<template>
  <Tabs>
    <TabPane label="按钮" icon="toggle-filled">
      <div>
        <span>{{ parentMenu.title }}</span>
        <span v-if="resourceList.length === 0">无关联项</span>
        <Tag v-else
             ref="menuResourceTag"
             v-for="(item, index) in resourceList"
             :color="item.color"
             :key="item.menuId"
             :name="item.name"
             @click.native="handleCheck(item, index)"
             @on-close="handleClose(item.menuId)"
             style="margin-left:10px;height: 28px;line-height: 28px;"
             closable
             :fade="false">{{ item.name }}
        </Tag>
      </div>
    </TabPane>
    <TabPane label="其他" icon="document-text">todo</TabPane>
  </Tabs>
</template>

<script>
export default {
  name: 'resourcePanel',
  data () {
    return {
      /* */
      checkable: false,
      resourceList: [],
      parentMenu: {}
    }
  },
  methods: {
    handleCheck (item, index) {
      if (this.$refs.menuResourceTag[index].name === item.name) {
        let param;
        if (this.resourceList[index].color === '#cca4e3') {
          /* 选中状态，改为未选中，并且展示菜单详情 */
          this.resourceList[index].color = 'default';
          param = this.parentMenu;
        } else {
          /* 未选中状态，先选中然后展示详情，同时判断其他按钮是否选中，如选中则改为未选中状态 */
          this.resourceList.forEach((item, i) => {
            item.color = i === index ? '#cca4e3' : 'default';
          });
          param = item;
        }
        this.$emit('menuResourceChanged', param);
      }
    },
    handleClose (resourceId) {
      /* 删除资源 */
      this.$emit('delete', resourceId);
      /* 刷新资源列表 */
      this.$emit('resourceUpdate', {
        menuId: this.dataForm.parentId,
        title: this.dataForm.name
      });
    },
    getResources (menuNode) {
      /* 获取菜单关联资源 */
      this.parentMenu = menuNode;
      this.$http({
        url: this.$http.adornUrl(`/sys/menu/resource/${menuNode.menuId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          // 清空tag
          this.clearResourceTag();
          // 重新渲染tags
          data.resourceList.forEach((item, index) => {
            item.color = 'default';
            this.resourceList.push(item);
          })
        }
      });
    },
    clearResourceTag () {
      /* 清空资源tag */
      const length = this.resourceList.length;
      // 清空reourceList数组
      this.resourceList.splice(0, length);
    }
  }
}
</script>

<style scoped>

</style>
